@use "design-system";

.multichain-send-page {
  $width-screen-sm-min: 85vw;
  $width-screen-md-min: 80vw;
  $width-screen-lg-min: 62vw;

  // prevent overflow-x
  max-width: 100%;
  border: 1px solid var(--color-border-muted);
  border-radius: 2px;
  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);

  @include design-system.screen-sm-min {
    width: $width-screen-sm-min;
  }

  @include design-system.screen-md-min {
    width: $width-screen-md-min;
  }

  @include design-system.screen-lg-min {
    width: $width-screen-lg-min;
  }

  &__account-picker {
    height: 62px;

    &__label {
      @include design-system.H6;

      font-weight: 500;

      @extend %ellipsify;
    }
  }

  &__nav-button {
    flex-basis: 50%;
  }

  &__recipient {
    width: 100%;

    &__item {
      &__title-tooltip > * {
        display: inline;
      }

      &__title-tooltip {
        white-space: nowrap;
      }

      &__title-tooltip-container {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &__title-confusable-wrapper {
        display: inline-block;
      }

      &__avatar {
        width: 20px;
        height: 20px;
        max-width: 20px;
        border-radius: 10px;
      }

      &__badge {
        transform: scale(1) translate(25%, 70%);
        width: '20px';
        height: '20px';
      }
    }
  }

  &__recipient:last-child {
    padding-bottom: 0;
  }
}
